<template>
  <div>
    <div class="back_btn">
      <span :class="appType === '277' ? 'icon_back' : 'icon_back_cat'" v-if="!this.show" @click="rotateClick"></span>
      <span :class="[appType === '277' ? 'icon_back' : 'icon_back_cat',{rote: this.show}]" v-else @click="rotateClick"></span>
    </div>
  </div>
</template>

<script>
import { appType } from '../../../assets/js/app'
  export default {
    data() {
      return {
        show: true,
        appType: null,
      }
    },
    created () {
    this.appType = appType()
      setTimeout(() => {
        this.show = !this.show
      }, 50)
    },
    methods: {
      rotateClick() {
        this.show = !this.show
        setTimeout(() => {
          this.$router.back()
        }, 500)
      }
    },
    
  }
</script>

<style scoped>
.back_btn {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 750px;
  height: 100px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
}

.icon_back {
  display: block;
  width: 50px;
  height: 50px;
  background: url('../../../assets/img/tabbar/icon_more_active.png') no-repeat;
  background-size: 100%;
  transform: rotateZ(90deg);
  transition: all ease 0.5s
}

.icon_back_cat {
  display: block;
  width: 50px;
  height: 50px;
  background: url('../../../assets/img/tabbar/icon_more_active_cat.png') no-repeat;
  background-size: 100%;
  transform: rotateZ(90deg);
  transition: all ease 0.5s
}

.rote {
  transform: rotateZ(0deg)
}
</style>